<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/util.js"></script>

</head>
<script>
    $(function () {
        $('.loginBtn').click(function () {
            let userVal = $('.user').val()
            let psdVal = $('.psd').val()


            if (!(/^\w+$/.test(userVal))) return alert('用户名不符合要求!')
            if (!(/^\d+$/.test(psdVal))) return alert('密码不符合要求!')

            let xhr = new XMLHttpRequest()
            xhr.open('post', 'http://cxk520.top:3000/users/login');
            // post方式携带请求参数，需要将参数写在send方法中，同时还需要设置请求头requestHeader
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(`username=${userVal}&userpwd=${psdVal}`);
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    let res = JSON.parse(this.responseText);
                    console.log(res);
                    // 根据接口响应值进行业务逻辑处理
                    // 1. 判断res中的data数组长度,如果长度为0的话，要弹窗提示当前用户名不存在
                    if (res.data.length === 0) return alert('用户名不存在!')

                    // 2. 判断res.data[0].userpwd  与  res.pwd，如果不一致，那么证明当前密码错误
                    if (res.data[0].userpwd !== res.pwd) return alert('密码错误!')

                    // 3. 登录成功，可以跳转首页 02
                    alert('登录成功!')
                    location.href = './entrypage2.html'
                }
            }
        })
    })
</script>
<style>
    body {
        background-color: rgb(239, 239, 239);
    }

    .enbox {
        width: 100%;
        height: 100%;
        max-width: 640px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .enhead {
        height: 2.666667rem
            /* 100/37.5 */
        ;
        width: 100%;
        line-height: 1.066667rem
            /* 40/37.5 */
        ;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(0, 196, 48);
    }

    .enbtn {
        width: 16rem
            /* 600/37.5 */
        ;
        height: 2.666667rem
            /* 100/37.5 */
        ;
        line-height: 1.6rem
            /* 60/37.5 */
        ;
        font-size: .8rem
            /* 30/37.5 */
        ;
        float: inline-end;
        overflow: hidden;
        margin-left: .266667rem
            /* 10/37.5 */
        ;
    }

    .back {
        position: absolute;
        left: 0;
        margin-left: .266667rem
            /* 10/37.5 */
        ;
    }

    .inputbox {
        line-height: 2.666667rem
            /* 100/37.5 */
        ;
    }

    .tittle {
        position: absolute;
        align-items: center;

    }

    .loginBtn {
        position: absolute;
        left: 40%;
        height: 2.6rem
            /* 60/37.5 */
        ;
        margin-top: 1.533333rem
            /* 20/37.5 */
        ;
        border-radius: 25%;
        ;
        width: 5.133333rem
            /* 80/37.5 */
        ;
        background-color: aliceblue;
        cursor: pointer;
    }
</style>

<body>
    <div class="enbox">
        <div class="enhead">
            <span class="back">
                <a href="./entrypage.html"> &lt; 返回</a>
            </span>
            <span class="tittle">登陆</span>
        </div>
        <form>
            <div class="inputbox">
                <label for="user">用户名</label>
                <input type="text" class="user enbtn" id="user" placeholder=" 请输入账号" height="1.066667rem /* 40/37.5 */"
                    width="10.026667rem /* 376/37.5 */">
            </div>
            <div class="inputbox">
                <label for="psd">密码</label>
                <input type="text" class="psd enbtn" id="psd" placeholder=" 请输入密码" height="1.066667rem /* 40/37.5 */"
                    width="10.026667rem /* 376/37.5 */">
            </div>
            <input type="button" value="登录" class="loginBtn">
        </form>
    </div>
</body>
<script>
    myPromiseAjax({
        url: 'http://39.105.198.203:3001/prod/index',
    }).then(data => {

        list.innerHTML = ''; // 清空书籍列表
        console.log(data.data.list);
        // 生成茶列表
        for (let i = 0; i < data.data.list.length; i++) {
            // 使用 data.data.list[i].tid 作为链接的 ID
            list.innerHTML += `<li>
                <a href='./detail.html?tid=${i + 1}'>
                    <div class="liBox">
                        <div class="ioc">
                            <img src=${data.data.list[i].fullSrc} alt="">
                        </div>
                        <div class="text">
                            <div class="teaName">${data.data.list[i].tname}</div>
                            <div class="teaPrice">¥ <span class="fontBig">${data.data.list[i].price}</span> .00</div>
                        </div>
                    </div>
                </a>
            </li>`;
        }

    }).catch(err => {

    });
</script>

</html>